<template>
    <div class="goods-type">
        <div class="goods-type-card">
            <div v-if="goodsList.length!=0">
                <!--上部-->
                <div class="goods-type-height">
                    <router-link :to="{name:'goods-type-edit-nocache',query:{id:0}}">
                        <Button class="goods-type-rightBtn" type="primary" size="large"><Icon type="plus-round"></Icon>新增分类商品</Button>
                    </router-link>
                </div>
                <!--表格头部-->
                <div class="goods-type-table-head">
                    <Row>
                        <Col span="8">商品分类名称</Col>
                        <Col span="4">分类图标</Col>
                        <Col span="3">排序号</Col>
                        <Col span="4">是否显示</Col>
                        <Col span="5">操作</Col>
                    </Row>
                </div>
                <!--列表-->
                <div class="goods-type-list-con">
                    <div class="goods-type-table-con" v-for="(key,value) in goodsList">
                        <!--一级列表-->
                        <div class="goods-type-thOne">
                            <Row>
                                <Col span="8" class="name" @click.native="getTwoList(key.catid,value)">
                                    <Icon class="down" :class="key.isIcon?'turnDown':''" type="arrow-right-b"></Icon>
                                    <span>{{key.catname}}</span>
                                </Col>
                                <Col span="4">
                                    <div v-if="key.pic!=null" class="icon">
                                        <div class="logImg">
                                            <img class="da" :src="key.pic"/>
                                        </div>
                                        <img :src="key.pic"/>
                                    </div>
                                    <p v-else>暂无</p>
                                </Col>
                                <Col span="3">{{key.catsort}}</Col>
                                <Col span="4">
                                    <template v-if="key.isshow==1">
                                        <Icon type="eye"></Icon> 显示
                                    </template>
                                    <template v-else>
                                        <Icon type="eye-disabled"></Icon> 隐藏
                                    </template>
                                </Col>
                                <Col span="5">
                                    <ButtonGroup>
                                        <Button @click="$router.push({name:'goods-type-edit-nocache',query:{id:key.catid}})" type="success"><Icon type="plus-round"></Icon> 新增</Button>
                                        <Button @click="$router.push({name:'goods-type-edit-nocache',query:{id:key.catid,isEdit:true}})" type="warning"><Icon type="edit"></Icon> 编辑</Button>
                                        <Button @click="deleDo(0,key.catid,value)" type="error"><Icon type="trash-b"></Icon> 删除</Button>
                                    </ButtonGroup>
                                </Col>
                            </Row>
                        </div>
                        <!--列表二-->
                        <div v-if="key.isIcon" v-for="(keyTwo,valueTwo) in key.chileren">
                            <div class="goods-type-thTwo">
                                <Row>
                                    <Col span="8" class="name" @click.native="getThreeList(keyTwo.catid,value,valueTwo)">
                                        <Icon class="down" :class="keyTwo.isIcon?'turnDown':''" type="arrow-right-b"></Icon>
                                        <span>{{keyTwo.catname}}</span>
                                    </Col>
                                    <Col span="4">
                                        <div v-if="keyTwo.pic!=null" class="icon">
                                            <div class="logImg">
                                                <img class="da" :src="keyTwo.pic"/>
                                            </div>
                                            <img :src="keyTwo.pic"/>
                                        </div>
                                        <p v-else>暂无</p>
                                    </Col>
                                    <Col span="3">{{keyTwo.catsort}}</Col>
                                    <Col span="4">
                                        <template v-if="keyTwo.isshow==1">
                                            <Icon type="eye"></Icon> 显示
                                        </template>
                                        <template v-else>
                                            <Icon type="eye-disabled"></Icon> 隐藏
                                        </template>
                                    </Col>
                                    <Col span="5">
                                        <ButtonGroup>
                                            <Button @click="$router.push({name:'goods-type-edit-nocache',query:{id:keyTwo.catid}})" type="success"><Icon type="plus-round"></Icon> 新增</Button>
                                            <Button @click="$router.push({name:'goods-type-edit-nocache',query:{id:keyTwo.catid,isEdit:true}})" type="warning"><Icon type="edit"></Icon> 编辑</Button>
                                            <Button @click="deleDo(1,keyTwo.catid,value,valueTwo)" type="error"><Icon type="trash-b"></Icon> 删除</Button>
                                        </ButtonGroup>
                                    </Col>
                                </Row>
                            </div>
                            <!--列表三-->
                            <div v-if="keyTwo.isIcon" v-for="(keyThree,valueThree) in keyTwo.chileren">
                                <div class="goods-type-thThree">
                                    <Row>
                                        <Col span="8" class="name">
                                            <span>{{keyThree.catname}}</span>
                                        </Col>
                                        <Col span="4">
                                            <div v-if="keyThree.pic!=null" class="icon">
                                                <div class="logImg">
                                                    <img class="da" :src="keyThree.pic"/>
                                                </div>
                                                <img :src="keyThree.pic"/>
                                            </div>
                                            <p v-else>暂无</p>
                                        </Col>
                                        <Col span="3">{{keyThree.catsort}}</Col>
                                        <Col span="4">
                                            <template v-if="keyThree.isshow==1">
                                                <Icon type="eye"></Icon> 显示
                                            </template>
                                            <template v-else>
                                                <Icon type="eye-disabled"></Icon> 隐藏
                                            </template>
                                        </Col>
                                        <Col span="5">
                                            <ButtonGroup>
                                                <Button @click="$router.push({name:'goods-type-edit-nocache',query:{id:keyThree.catid,isEdit:true}})" type="warning"><Icon type="edit"></Icon> 编辑</Button>
                                                <Button @click="deleDo(2,keyThree.catid,value,valueTwo,valueThree)" type="error"><Icon type="trash-b"></Icon> 删除</Button>
                                            </ButtonGroup>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <img class="goods-type-nodata" src="../../../../images/nodata.gif"/>
                <p class="goods-type-notice">您还没有添加过分类商品</p>
                <router-link :to="{name:'goods-type-edit-nocache',query:{id:0}}">
                    <Button class="goods-type-nowAdd" type="primary" size="large">立即添加</Button>
                </router-link>
            </div>
        </div>
        <!--确定删除-->
        <Modal v-model="modal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>删除此分类后无法恢复</p>
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <i-button type="error" size="large" long :loading="modal_loading" @click="del">删除</i-button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"goods-type",
        data(){
            return{
                goodsList:[],//分类大数组
                modal:false,
                modal_loading: false,
                doIndex:0,//默认操作一级列表，0，1，2共三个等级
                doCatId:"",//默认操作的CATID
                deleYJIndex:"",//删除一级列表下标
                deleEJIndex:"",//删除二级列表下标
                deleSJIndex:"",//删除三级列表下标
            }
        },
        mounted(){
            this.getOneList()
        },
        methods:{
            //获取一级分类
            getOneList(){
                this.getJsonData("Cat/getOneCat",{})
                    .then((res) => {
                        for(var i=0;i<res.data.length;i++){
                            this.goodsList.splice(i,1,{
                                catname:res.data[i].catname,
                                catsort:res.data[i].catsort,
                                pic:res.data[i].pic,
                                catid:res.data[i].catid,
                                isshow:res.data[i].isshow,
                                isIcon:false,//是否展开子分类
                                chileren:[],
                            })
                        }
                    })
            },
            //获取二级分类
            getTwoList(id,index){
                if(this.goodsList[index].isIcon==false){
                    this.$Loading.start();
                    this.getJsonData("Cat/getChildCat",{catId:id})
                        .then((res) => {
                            if(res.data.length!=0){
                                for(var i=0;i<res.data.length;i++){
                                    this.goodsList[index].chileren.splice(i,1,{
                                        catname:res.data[i].catname,
                                        catsort:res.data[i].catsort,
                                        pic:res.data[i].pic,
                                        catid:res.data[i].catid,
                                        isshow:res.data[i].isshow,
                                        isIcon:false,//是否展开子分类
                                        chileren:[],
                                    })
                                }
                                this.goodsList[index].isIcon=true
                            }else{
                                setTimeout(()=>{
                                    this.$Message.error("暂无分类");
                                },500)
                            }
                        })
                }else{
                    this.goodsList[index].isIcon=false
                    this.goodsList[index].chileren=[]
                }
            },
            //获取三级分类
            getThreeList(id,indexOne,indexTwo){
                if(this.goodsList[indexOne].chileren[indexTwo].isIcon==false){
                    this.$Loading.start();
                    this.getJsonData("Cat/getChildCat",{catId:id})
                        .then((res) => {
                            if(res.data.length!=0){
                                for(var i=0;i<res.data.length;i++){
                                    this.goodsList[indexOne].chileren[indexTwo].chileren.splice(i,1,{
                                        catname:res.data[i].catname,
                                        catsort:res.data[i].catsort,
                                        pic:res.data[i].pic,
                                        catid:res.data[i].catid,
                                        isshow:res.data[i].isshow,
                                        isIcon:false,//是否展开子分类
                                        chileren:[],
                                    })
                                }
                                this.goodsList[indexOne].chileren[indexTwo].isIcon=true
                            }else{
                                setTimeout(()=>{
                                    this.$Message.error("暂无分类");
                                },500)
                            }
                        })
                }else{
                    this.goodsList[indexOne].chileren[indexTwo].isIcon=false
                    this.goodsList[indexOne].chileren[indexTwo].chileren=[]
                }
            },
            deleDo(n,catId,index,indexTwo,indexThree){
                this.doIndex=n
                this.doCatId=catId
                this.deleYJIndex=index
                this.deleEJIndex=indexTwo
                this.deleSJIndex=indexThree
                this.modal = true;
            },
            del(){
                this.modal_loading = true;
                this.getJsonData("Cat/deleteCat",{catId:this.doCatId},true)
                    .then((res) =>{
                        if(this.doIndex==0){
                            this.goodsList.splice(this.deleYJIndex,1)
                        }else if(this.doIndex==1){
                            this.goodsList[this.deleYJIndex].chileren.splice(this.deleEJIndex,1)
                        }else{
                            this.goodsList[this.deleYJIndex].chileren[this.deleEJIndex].chileren.splice(this.deleSJIndex,1)
                        }
                        this.modal_loading = false;
                        this.modal = false;
                        this.$Message.success("删除成功");
                    })
                    .catch((res)=>{
                        this.modal_loading = false;
                        this.modal = false;
                    })
            }
        }
    }
</script>
<style lang="less">
    @import "./goods-type";
</style>